<template>
    <div class="dahezi">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>病友论坛</el-breadcrumb-item>
            <el-breadcrumb-item>文章详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="hezi">
            <div class="hezi2">
            <div class="hezi3">

                <div class="wenzhangbiaoti">
                    {{wenzhang.title}}
                </div>
                <router-link :to="{name:'yonghuxinxichaxun',
                                 query:{id:wenzhang.userId
                                 }}">
                <span style="margin-left: 30px; font-size: 5px; color: #888888; float: right ;right: 30px; width: 300px; height: 35px">
                    作者：{{wenzhang.userName}}
                </span>
                </router-link>
                <span style="margin-left: 30px; font-size: 5px; color: #888888; float: right ;right: 30px; width: 300px;  height: 35px">
                    发布时间：{{wenzhang.time}}
                </span>
                <div class="wenzhangneirong">
                        <div v-html="wenzhang.content" ></div>
                    <div style="float: right">
                        <el-tooltip class="item" effect="dark"  placement="top-start">
                            <div slot="content">
                                {{dianzangflag}}
                            </div>
                            <el-button v-if="dianzangflag == '点赞'" type="warning" circle @click="dianzang">👍({{wenzhang.countGetLike}})</el-button>
                            <el-button v-else-if="dianzangflag =='取消点赞'" type="warning" circle @click="quxiaodianzang">👍({{wenzhang.countGetLike}})</el-button>
                            <el-button v-else type="warning" circle>👍({{wenzhang.countGetLike}})</el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark"  placement="top-start">
                            <div slot="content">
                                {{shoucangflag}}
                            </div>
                            <el-button v-if="shoucangflag == '收藏'" type="warning" circle @click="shoucang">★({{wenzhang.countCollect}})</el-button>
                            <el-button v-else-if="shoucangflag =='取消收藏'" type="warning" circle @click="quxiaoshoucang">👍({{wenzhang.countCollect}})</el-button>
                            <el-button v-else type="warning" circle>👍({{wenzhang.countCollect}})</el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="浏览量" placement="top-start">
                            <el-button type="warning" circle >👀({{wenzhang.countLook}})</el-button>
                        </el-tooltip>
                    </div>

                </div>
            </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "wenzhangxiangqing",
        data(){ return{
            wenzhang:{},
            dianzangflag: null,
            shoucangflag: null,
        }},
        created() {
            this.wenzhangxiangqing();
            this.test();
        },
        methods:{
            async test(){
                const check = window.sessionStorage.getItem('token');
                if(check != null){
                    this.getuserlll();
                }
            },
            async getuserlll(){
                const {data:jieguo}=await this.$http.get('user/info',{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})

                this.shiyisheng=jieguo.data.userRole
                this.form.userName=jieguo.data.basicUserInformation.username
                this.form.userId=jieguo.data.basicUserInformation.id
                this.basicUserInformation=jieguo.data.basicUserInformation
                this.sousuowenzhang=jieguo.data.articles
                console.log(this.sousuowenzhang)
            },
            async dianzang(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.get("user/getLike?articleId="+this.wenzhang.id).then(response => {
                    if(response.data.code==200){
                        this.$message.success('点赞成功！')
                    }
                });
                this.wenzhangxiangqing()
            },
            async shoucang(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.get("user/collectArticle?articleId="+this.wenzhang.id).then(response => {
                    if(response.data.code==200){
                        this.$message.success('收藏成功！')
                    }
                });
                this.wenzhangxiangqing()
            },
            async quxiaodianzang(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.get("user/deleteGetLike?articleId="+this.wenzhang.id).then(response => {
                    if(response.data.code==200){
                        this.$message.success('取消点赞成功！')
                    }
                });

                this.wenzhangxiangqing()
            },
            async quxiaoshoucang(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.get("user/cancelCollectionArticle?articleId="+this.wenzhang.id).then(response => {
                    if(response.data.code==200){
                        this.$message.success('取消收藏成功！')
                    }
                });

                this.wenzhangxiangqing()
            },
            async  wenzhangxiangqing(){
                const {data:jieguo}=await this.$http.get(`article/${this.$route.query.id}`)
                this.wenzhang=jieguo.data.article
                this.dianzangflag=jieguo.data.dianzangflag
                this.shoucangflag=jieguo.data.shoucangflag
                console.log(this.wenzhang.id);
                console.log(this.dianzangflag);
                console.log(this.shoucangflag);
                this.reload();

            },
        }
    }
</script>

<style scoped>
    .hezi{
        width: 80%;
        min-height: 700px;
        height: auto!important;
        display: flex;
        justify-content:center;
        background: #FFFFE0;
    }
    .hezi2{
        color: black;
        width: 70%;
        background-color: white;
        margin-top: 3px;
    }

    .dahezi{
        padding-top: 3px;
        background-color: #fffacd;
    }

    .wenzhangneirong{
        width: 100%;
        min-height: 90%;
        height: auto!important;
        overflow: scroll;
        text-overflow: ellipsis;
    }

    .wenzhangbiaoti{
        height: 35px;
        margin: 6px;
        margin-left: 30px;
        padding: 2px;
        text-align: center;
        color: black;
        line-height: 2em;
        font-size: 25px;
    }
    .zuixintiezi3{

        width: 85%;
        height: 30px;
        margin: 6px;
        margin-left: 30px;
        padding: 2px;
        border: solid 1px #999999;
        text-align: center;
        color: black;
        line-height: 2em
    }

</style>
